<template>
  <div class="vavleInfoForm">
    <div class="operateGroup">
      <button>保存</button>
      <button @click="print">打印</button>
      <button @click="cancel">取消</button>
    </div>
    <div id="TableDiv" ref="vavleInfoForm" style="width: 100%">
      <table
        border="1"
        width="100%"
        id="table1"
        bordercolorlight="#000000"
        cellspacing="0"
        cellpadding="3"
        bordercolordark="#FFFFFF"
        style="text-align: center"
      >
        <tr>
          <td
            style="
              text-align: center;
              font-size: 30px;
              font: bold;
              margin-top: 10px;
              margin-bottom: 20px;
            "
            colspan="5"
          >
            阀门操作记录单
          </td>
        </tr>
        <tr style="height: 30px">
          <td
            class="style1"
            style="width: 20%; font-weight: bolder; font-size: 14px"
          >
            操作原因
          </td>
          <td style="width: 15%; font-weight: bolder; font-size: 14px">
            计划停水&nbsp;&nbsp;<input
              id="CheckBox1"
              type="checkbox"
              name="CheckBox1"
              v-model="tableData.operateReason.planStopWater"
            />
          </td>
          <td style="width: 15%; font-weight: bolder; font-size: 14px">
            爆管抢修&nbsp;&nbsp;<input
              id="CheckBox2"
              type="checkbox"
              name="CheckBox2"
              v-model="tableData.operateReason.brustFix"
            />
          </td>
          <td
            colspan="2"
            style="
              border-right: 1px solid #000000;
              width: 50%;
              font-weight: bolder;
              font-size: 14px;
            "
          >
            更换阀门&nbsp;&nbsp;<input
              id="CheckBox3"
              type="checkbox"
              name="CheckBox3"
              v-model="tableData.operateReason.changeValve"
            />
          </td>
        </tr>
        <tr style="height: 30px">
          <td class="style1" style="font-size: 14px">工程名称</td>
          <td colspan="2" style="font-size: 14px">
            <textarea
              name="TextBox1"
              rows="2"
              cols="20"
              id="TextBox1"
              class="TextStyle"
              style="resize: none"
              v-model="tableData.tableDetailForm.prjName"
            ></textarea>
          </td>
          <td style="width: 22%; font-size: 14px">阀门编号</td>
          <td
            style="border-right: 1px solid #000000; width: 28%; font-size: 14px"
          >
            <textarea
              name="TextBox2"
              rows="2"
              cols="20"
              id="TextBox2"
              class="TextStyle"
              style="resize: none"
              v-model="tableData.tableDetailForm.valveCode"
            ></textarea>
          </td>
        </tr>
        <tr style="height: 30px; font-size: 14px">
          <td class="style1">施工管理员</td>
          <td colspan="2" style="font-size: 14px">
            <textarea
              name="TextBox3"
              rows="2"
              cols="20"
              id="TextBox3"
              class="TextStyle"
              style="resize: none"
              v-model="tableData.tableDetailForm.prjAdmin"
            ></textarea>
          </td>
          <td style="font-size: 14px">新装阀门厂家</td>
          <td style="border-right: 1px solid #000000; font-size: 14px">
            <textarea
              name="TextBox4"
              rows="2"
              cols="20"
              id="TextBox4"
              class="TextStyle"
              style="resize: none"
              v-model="tableData.tableDetailForm.newInstallValveManufacturer"
            ></textarea>
          </td>
        </tr>
        <tr style="height: 30px">
          <td class="style1" style="font-size: 14px">停水时间</td>
          <td colspan="2" style="font-size: 14px">
            <textarea
              name="TextBox5"
              rows="2"
              cols="20"
              id="TextBox5"
              class="TextStyle"
              style="resize: none"
              v-model="tableData.tableDetailForm.waterOutageTime"
            ></textarea>
          </td>
          <td style="font-size: 14px">新装阀门型号及规格</td>
          <td style="border-right: 1px solid #000000; font-size: 14px">
            <textarea
              name="TextBox6"
              rows="2"
              cols="20"
              id="TextBox6"
              class="TextStyle"
              style="resize: none"
              v-model="
                tableData.tableDetailForm.newInstallValveModelAndSpecifications
              "
            ></textarea>
          </td>
        </tr>
        <tr style="height: 30px">
          <td class="style1" style="font-size: 14px">工程地点</td>
          <td colspan="4" style="font-size: 14px">
            <textarea
              name="TextBox7"
              rows="2"
              cols="20"
              id="TextBox7"
              class="TextStyle"
              style="resize: none"
              v-model="tableData.tableDetailForm.prjPlace"
            ></textarea>
          </td>
        </tr>
      </table>
      <table
        border="1"
        width="100%"
        id="table2"
        bordercolorlight="#000000"
        cellspacing="0"
        cellpadding="3"
        bordercolordark="#FFFFFF"
        style="text-align: center"
      >
        <tr style="height: 30px">
          <td style="width: 9%"></td>
          <td colspan="2" style="width: 11%; font-size: 14px">施工企业</td>
          <td colspan="6">
            <textarea
              name="TextBox8"
              rows="2"
              cols="20"
              id="TextBox8"
              class="TextStyle"
              style="resize: none"
              v-model="tableData.tableDetailForm.constructionEnterprises"
            ></textarea>
          </td>
        </tr>
        <tr>
          <td
            id="Title"
            :rowspan="tableData.operateValveList.length + 1"
            style="font-weight: bolder; font-size: 20px"
          >
            操<br />
            作<br />
            阀<br />
            门<br />
            列<br />
            表
          </td>
          <td style="width: 4%; font-weight: bolder; font-size: 14px">序号</td>
          <td style="font-weight: bolder; font-size: 14px">编号</td>
          <td style="width: 11%; font-weight: bolder; font-size: 14px">
            关键字
          </td>
          <td style="width: 6%; font-weight: bolder; font-size: 14px">内径</td>
          <td style="width: 35%; font-weight: bolder; font-size: 14px">地址</td>
          <td
            style="width: 7%; font-weight: bolder; font-size: 14px"
            nowrap="nowrap"
          >
            开/关
          </td>
          <td
            style="width: 11%; font-weight: bolder; font-size: 14px"
            nowrap="nowrap"
          >
            状况记录
          </td>
          <td style="font-weight: bolder; font-size: 14px">备注</td>
        </tr>
        <tr
          style="height: 26px"
          v-for="(item, index) in tableData.operateValveList"
        >
          <td align="center" style="height: 25px; font-size: 12px">
            {{ index + 1 }}
          </td>
          <td align="center" style="height: 25px">
            <textarea
              style="
                border: none;
                width: 100%;
                height: 60%;
                overflow-x: hidden;
                overflow-y: hidden;
                font-size: 12px;
              "
              v-model="item.id"
              >{{ item.id }}</textarea
            >
          </td>
          <td align="center" style="height: 25px">
            <textarea
              style="
                border: none;
                width: 100%;
                height: 60%;
                overflow-x: hidden;
                overflow-y: hidden;
                font-size: 12px;
              "
              v-model="item.keywords"
              >{{ item.keywords }}</textarea
            >
          </td>
          <td align="center" style="height: 25px">
            <textarea
              style="
                border: none;
                width: 100%;
                height: 60%;
                overflow-x: hidden;
                overflow-y: hidden;
                font-size: 12px;
              "
              v-model="item.internalDiameter"
              >{{ item.internalDiameter }}</textarea
            >
          </td>
          <td align="center" style="width: 300px; height: 25px">
            <textarea
              style="
                border: none;
                width: 100%;
                height: 60%;
                overflow-x: hidden;
                overflow-y: hidden;
                font-size: 12px;
              "
              v-model="item.address"
              >{{ item.address }}</textarea
            >
          </td>
          <td align="center" style="width: 40px; height: 25px">
            <textarea
              style="
                border: none;
                width: 100%;
                height: 60%;
                overflow-x: hidden;
                overflow-y: hidden;
                font-size: 12px;
              "
              v-model="item.state"
              >{{ item.state }}</textarea
            >
          </td>
          <td align="center" style="font-size: 12px" nowrap="nowrap">
            {{ item.record }}
          </td>
          <td align="center" style="width: 20px; height: 25px">
            <textarea
              style="
                border: none;
                width: 100%;
                height: 60%;
                overflow-x: hidden;
                overflow-y: hidden;
                font-size: 12px;
              "
              v-model="item.marker"
              >{{ item.marker }}</textarea
            >
          </td>
        </tr>
      </table>
      <table
        border="1"
        width="100%"
        id="tableDown"
        bordercolorlight="#000000"
        cellspacing="0"
        cellpadding="3"
        bordercolordark="#FFFFFF"
        style="text-align: center"
      >
        <tr style="height: 0px">
          <th :rowspan="tableData.planExpand.length + 1" style="width: 9%">
            扩大方案<br />
            (如有)
          </th>

          <!-- <td style="font-size: 0px; width: 100%"></td> -->
        </tr>
        <tr style="height: 30px" v-for="(item, index) in tableData.planExpand">
          <td style="font-size: 14px; width: 4%">{{ index + 1 }}</td>
          <td style="font-size: 14px; width: 7%">
            <textarea
              name="TextBox14"
              rows="2"
              cols="20"
              id="TextBox14"
              class="TextStyle"
              style="resize: none"
              v-model="item.id"
              >{{ item.id }}</textarea
            >
          </td>
          <td style="font-size: 14px; width: 11%">
            <textarea
              name="TextBox30"
              rows="2"
              cols="20"
              id="TextBox30"
              class="TextStyle"
              style="resize: none"
              v-model="item.keywords"
              >{{ item.keywords }}</textarea
            >
          </td>
          <td style="font-size: 14px; width: 6%">
            <textarea
              name="TextBox15"
              rows="2"
              cols="20"
              id="TextBox15"
              class="TextStyle"
              style="resize: none"
              v-model="item.internalDiameter"
              >{{ item.internalDiameter }}</textarea
            >
          </td>
          <td style="font-size: 14px; width: 35%">
            <textarea
              name="TextBox16"
              rows="2"
              cols="20"
              id="TextBox16"
              class="TextStyle"
              style="resize: none"
              v-model="item.address"
              >{{ item.address }}</textarea
            >
          </td>
          <td style="font-size: 14px; width: 7%" nowrap="nowrap">
            <textarea
              name="TextBox17"
              rows="2"
              cols="20"
              id="TextBox17"
              class="TextStyle"
              style="resize: none"
              v-model="item.state"
              >{{ item.state }}</textarea
            >
          </td>
          <td style="font-size: 12px; width: 11%" nowrap="nowrap">
            <label> (失)(有)效</label>
          </td>
          <td>
            <textarea
              name="TextBox18"
              rows="2"
              cols="20"
              id="TextBox18"
              class="TextStyle"
              style="resize: none"
              v-model="item.marker"
              >{{ item.marker }}</textarea
            >
          </td>
        </tr>
        <tr style="margin-top: 30px; text-align: right">
          <td colspan="9">苏州吴中供水有限公司</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import html2canvas from "html2canvas";
export default {
  props: {
    // dialogVisible: {
    //   type: Boolean,
    //   required: true,
    // },
  },
  data() {
    return {
      prj: {
        Name: "",
        number: "",
      },
      tableData: {
        operateReason: {
          planStopWater: 0,
          brustFix: 0,
          changeValve: 0,
        },
        tableDetailForm: {
          prjName: "",
          valveCode: "",
          prjAdmin: "",
          newInstallValveManufacturer: "",
          waterOutageTime: "",
          newInstallValveModelAndSpecifications: "",
          prjPlace: "",
          constructionEnterprises: "",
        },
        operateValveList: [
          {
            id: "",
            keywords: "",
            internalDiameter: "",
            address: "",
            state: "",
            record: "	(失)(有)效",
            marker: "",
          },
          {
            id: "",
            keywords: "",
            internalDiameter: "",
            address: "",
            state: "",
            record: "	(失)(有)效",
            marker: "",
          },
          {
            id: "",
            keywords: "",
            internalDiameter: "",
            address: "",
            state: "",
            record: "	(失)(有)效",
            marker: "",
          },
          {
            id: "",
            keywords: "",
            internalDiameter: "",
            address: "",
            state: "",
            record: "	(失)(有)效",
            marker: "",
          },
          {
            id: "",
            keywords: "",
            internalDiameter: "",
            address: "",
            state: "",
            record: "	(失)(有)效",
            marker: "",
          },
          {
            id: "",
            keywords: "",
            internalDiameter: "",
            address: "",
            state: "",
            record: "	(失)(有)效",
            marker: "",
          },
          {
            id: "",
            keywords: "",
            internalDiameter: "",
            address: "",
            state: "",
            record: "	(失)(有)效",
            marker: "",
          },
          {
            id: "",
            keywords: "",
            internalDiameter: "",
            address: "",
            state: "",
            record: "	(失)(有)效",
            marker: "",
          },
          {
            id: "",
            keywords: "",
            internalDiameter: "",
            address: "",
            state: "",
            record: "	(失)(有)效",
            marker: "",
          },
          {
            id: "",
            keywords: "",
            internalDiameter: "",
            address: "",
            state: "",
            record: "	(失)(有)效",
            marker: "",
          },
          {
            id: "",
            keywords: "",
            internalDiameter: "",
            address: "",
            state: "",
            record: "	(失)(有)效",
            marker: "",
          },
          {
            id: "",
            keywords: "",
            internalDiameter: "",
            address: "",
            state: "",
            record: "	(失)(有)效",
            marker: "",
          },
          {
            id: "",
            keywords: "",
            internalDiameter: "",
            address: "",
            state: "",
            record: "	(失)(有)效",
            marker: "",
          },
          {
            id: "",
            keywords: "",
            internalDiameter: "",
            address: "",
            state: "",
            record: "	(失)(有)效",
            marker: "",
          },
          {
            id: "",
            keywords: "",
            internalDiameter: "",
            address: "",
            state: "",
            record: "	(失)(有)效",
            marker: "",
          },
        ],
        planExpand: [
          {
            id: "",
            keywords: "",
            internalDiameter: "",
            address: "",
            state: "",
            record: "",
            marker: "",
          },
          {
            id: "",
            keywords: "",
            internalDiameter: "",
            address: "",
            state: "",
            record: "",
            marker: "",
          },
          {
            id: "",
            keywords: "",
            internalDiameter: "",
            address: "",
            state: "",
            record: "",
            marker: "",
          },
        ],
      },
    };
  },
  computed: {
    impactValveList() {
      return this.$store.state.impactValveList;
    },
  },
  watch: {
    impactValveList(val) {
      this.tableData.operateValveList = val.map((item) => {
        return {
          id: item.keywords.replace(/\s+/g, ""),
          keywords: item.keywords.replace(/\s+/g, ""),
          internalDiameter: item.diameter.replace(/\s+/g, ""),
          address: item.roadName.replace(/\s+/g, ""),
          state: item.valveStatus.replace(/\s+/g, ""),
          record: "有效",
          marker: "",
        };
      });
    },
  },
  methods: {
    async print() {
      const printContent = this.$refs.vavleInfoForm;
      const canvas = await html2canvas(printContent, {
        scale: 1.5,
        useCORS: true,
      });
      let printImageSrc = canvas.toDataURL("image/png");
      const printWindow = window.open("打印页面", "_blank");
      const htmlContent = `
          <html>
          <head>
            <title>打印页面</title>
            <style>
              body, html {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
              }
              img {
               width: 100%;
                height: auto;              
              }
              @media print {
                /* 打印样式 */
                 @page {
                size: A4 portrait; /* 设置页面大小为A4，纵向 */
                margin: 0; /* 去除页面边距 */
            }
            body {
                width: 220mm; /* A4纸的宽度 */
                height: 297mm; /* A4纸的高度 */          
                 display: flex;
                justify-content: center;
                align-items: center;
            }
            img {
                max-width: 95%;
                max-height: 100%;
                object-fit: contain; /* 保持图片的宽高比 */
            }
              }
            </style>
          </head>
          <body>
            <img src="${printImageSrc}" alt="打印内容" />
          </body>
        </html>
        `;
      printWindow.document.write(htmlContent);
      printWindow.document.close();
      printWindow.onload = () => {
        printWindow.print();
        printWindow.close();
      };
    },
    cancel() {
      this.$store.commit("setshowValveOperate", false);
    },
    // closeDialog() {
    //   // 通过修改 prop 来关闭弹窗
    //   this.$emit("update:dialogVisible", false);
    // },
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.vavleInfoForm {
  color: #000;
  position: absolute;
  top: 5%;
  // transform: translate(-20%, -4%);
  right: 160%;
  background-color: #fff;
  width: 50vw;
  z-index: 99999;
  max-height: 80vh;
  border: 1px solid #000;
  overflow: auto;
  .operateGroup {
    display: flex;
    margin: 6px 0;
    button {
      width: 60px;
      margin: 0 3px;
    }
  }
  .vavleInfoFormTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 1rem;
    background-color: #285383;
    /* .title-left, */
    .title-right {
      width: 1vw;
      display: flex;
      align-items: center;
      border: solid 1px slategray;
      border-radius: 3px;
      background-color: white;
    }
    /* .bar {
            width: 5px; /* 小竖条的宽度 */
    /* height: 20px; 小竖条的高度 */
    /* background-color: white; 小竖条的颜色 */
    /* margin-right: 10px; 小竖条和文字之间的间距 */
  }
  .icon {
    width: 20px; /* 小方框的宽度 */
    height: 20px; /* 小方框的高度 */
    /* border: 1px solid #979797; 小方框的边框 */
    padding-left: 0.25vw; /*小方框之间的间距*/
  }
  .icon:hover {
    color: #285383;
  }
  .icon:focus {
    color: #4998f2;
  }
}
.equipInfoQueryContent {
  padding: 10px;
  display: flex;
  flex-direction: column;
  background-color: white;
  font-size: 0.8rem;
}
.dataForm {
  margin-top: 10px;
  border: 2px solid rgb(0, 0, 0);
}
.formcol {
  border-top: 2px solid #000000;
  width: 100px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
.formItem {
  display: flex;
  height: 30px;
  margin: 0;
}
.itemIn {
  border-left: 2px solid #000000;
  border-right: 2px solid #000000;
}
textarea {
  resize: none;
  width: 100%;
  outline: none;
  border: none;
}
td {
  // display: flex;
  overflow: hidden;
}
#table1 {
  border-bottom: 0;
}
#table2 {
  border-bottom: 0;
}
</style>
